<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <h1>CSS层叠样式表</h1>


    <!--
        标记语言
        全称：Cascading Style Sheets
        使用场景：美化网页，布局页面
        最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构（html)与样式（css)相分离
        
        一、选择器：
        1.基础选择器：

        1.1标签选择器、用html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。
        标签名{
            属性1：属性值1；
            属性2：属性值2；
            属性3：属性值3；
            ...
        }

        1.2类选择器、差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
        .类名{            /*类选择器口诀：样式点定义，结构类（class)调用,一个或者多个，开发最为常用*/
            
        }

        1.3id选择器、可以为标有特定id的html元素指定特定的样式。html元素以id属性来设置id选择器，css中id选择器以"#"来定义。
        #id{                /*id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用*/
            属性1：属性1；
            属性2：属性2；
            ...
        }

        1.4通配符选择器  使用"*"定义，它表示选取页面中所有元素（标签）。
        *{              /*不用调用，自动给所有的元素使用样式*/
            属性1：属性1；
            属性2：属性2；
            ...
        }


        复合选择器


        二、字体属性

        文本属性

        属性               表示           注意点
        color              文本颜色       我们通常用十六进制
        text-align         文本对齐       可以设定文字水平的对齐方式
        text-indent        文本缩进       段落首行缩进2个字的距离  text-indent:2em;
        text-decoration   文本修饰        添加下划线underline 取消下划线 none
        line-height       行高            控制行间距

        三、引入方式
        3.1行内样式表（内行式）  
        3.2内部样式表（嵌入式）
        3.3外部样式表（链接式）
    -->

    <style>
        .red {
            color: red;
        }
    </style>

    <style>
        #颜色 {
            color: rosybrown;
        }
    </style>

    <style>
        p {
            /*字体*/
            font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
            /*font-family: 'Times New Roman', Times, serif;*/
            /*最常见的几个字体：body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}*/
            /*字号*/
            font-size: 20px;
            /*标题标签比较特殊，需要单独指定文字大小
            px(像素)大小是我们网页的最常用的单位，谷歌浏览器默认文字大小为16px*/
            /*字体粗细*/
            font-weight: bold;
            /*字体风格*/
            font-style: normal;
            /*复合属性：简写方式,顺序不能颠倒
            font：font-style font-weight font-size/line-height font-family;
            例如：
            font italic 700 16px 'Microsoft YaHei';
            不需要设置的属性可以省略不写，但必须保留font-size和font-family属性，否则font属性不起作用
            */
        }
    </style>



</head>

<body>
    <ul>
        <li class="red">天正下蒙蒙雨</li>
        <li>而我在等你</li>
        <li id="颜色">月色被打捞起</li>
    </ul>

    <h1>夜的第七章</h1>
    <p>1983年小巷 12月晴朗</p>
    <p>夜的第七章</p>
    <p>打字机继续推向</p>
    <p>接近事实的那下一行</p>

</body>

</html>


<!--
    类命名规则：

头：header 
  内容：content/container
  尾：footer
  导航：nav    
  侧栏：sidebar
  栏目：column
  页面外围控制整体布局宽度：wrapper
  左右中：left right center
  登录条：loginbar
  标志：logo
  广告：banner
  页面主体：main
  热点：hot
  新闻：news
  下载：download
  子导航：subnav
  菜单：menu
  子菜单：submenu
  搜索：search
  友情链接：friendlink
  页脚：footer
  版权：copyright
  滚动：scroll
  内容：content
  标签页：tab
  文章列表：list
  提示信息：msg
  小技巧：tips
  栏目标题：title
  加入：joinus
  指南：guild
  服务：service
  注册：regsiter
  状态：status
  投票：vote
  合作伙伴：partner
(二)注释的写法:
  /* Footer */
  内容区
  /* End Footer */
(三)id的命名:
  (1)页面结构
  容器: container
  页头：header
  内容：content/container
  页面主体：main
  页尾：footer
  导航：nav
  侧栏：sidebar
  栏目：column
  页面外围控制整体布局宽度：wrapper
  左右中：left right center

  (2)导航
  导航：nav
  主导航：mainbav
  子导航：subnav
  顶导航：topnav
  边导航：sidebar
  左导航：leftsidebar
  右导航：rightsidebar
  菜单：menu
  子菜单：submenu
  标题: title
  摘要: summary

  (3)功能
  标志：logo
  广告：banner
  登陆：login
  登录条：loginbar
  注册：regsiter
  搜索：search
  功能区：shop
  标题：title
  加入：joinus
  状态：status
  按钮：btn
  滚动：scroll
  标签页：tab
  文章列表：list
  提示信息：msg
  当前的: current
  小技巧：tips
  图标: icon
  注释：note
  指南：guild
  服务：service
  热点：hot
  新闻：news
  下载：download
  投票：vote
  合作伙伴：partner
  友情链接：link







  知道什么是,外部样式表，内部样式表，内部样式表？？？？
  <style> 定义样式 <link> 定义资源引用 <div> 定义文档中的节或区域。<span> 定义文档中的行内的小块或区域
  <font> 规定文本的字体、字体尺寸、字体颜色 <basefont> 定义基准字体 <center> 对文本进行水平居中。
  rel是Relations的所写 指关联到一个stylesheet（样式表单)。  stylesheet就是样式表的意思

  width=device-width ：表示宽度是设备屏幕的宽度
  initial-scale=1.0：表示初始的缩放比例
  minimum-scale=0.5：表示最小的缩放比例
  maximum-scale=2.0：表示最大的缩放比例
  user-scalable=yes：表示用户是否可以调整缩放比例
  shrink-to-fit=no   ios用到

  <button> 标签
      html id

  jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

  <b>这是粗体文本</b>

DOM
  通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素
-->